<template>
  <el-popover
    popper-style="max-width:auto;padding:0;"
    placement="top-start"
    :width="250"
    v-model:visible="showSearchPop"
    :disabled="isSearchPage"
  >
    <template #reference>
      <el-input
        class="cus-inp"
        :prefix-icon="Search"
        v-model="keyWord"
        placeholder="搜索音乐、MV、歌单"
        clearable
        :disabled="isSearchPage"
        @input="changeInputKey"
        @focus="setShowPop(true)"
        @blur="setShowPop(false)"
      />
    </template>
    <div class="h-96">
      <el-scrollbar>
        <HotList v-if="!keyWord.length" />
        <SearchList v-else />
      </el-scrollbar>
    </div>
  </el-popover>
</template>

<script lang="ts" setup>
import { toRefs, watch, ref, computed } from 'vue'
import { Search } from '@icon-park/vue-next'
import { useSearchStore } from '@/stores/search'
import HotList from './HotList.vue'
import SearchList from './SearchList.vue'
import { useRoute } from 'vue-router'

const { keyWord, getHotSearch, showSearchPop, setShowPop, changeInputKey } = toRefs(useSearchStore())
const route = useRoute()
const currentUrl = ref<string>('')

// 当为搜索页面时候禁用
const isSearchPage = computed(() => currentUrl.value === '/search-index')

watch(
  () => route.path,
  (n) => {
    currentUrl.value = n
  },
  {
    immediate: true,
  }
)

// 获取热搜记录
getHotSearch.value()
</script>

<style lang="less" scoped>
.cus-inp {
  :deep(.el-input__wrapper) {
    border-radius: 50px;
  }
}
</style>
